<template>
    <div>

      <div style="display:flex;margin-bottom: 50px;">
        <div style="width: 300px;">
          <img :src="coverImg" style="width: 300px;display: inline-block;" />
        </div>

        <div style="flex:1">
          <span style="color: #323232;font-size: 15px;line-height: 20px;font-weight: 600;">{{title}}</span>
          <br />
          <br />
          <span>{{syNpsis}}</span>
          <el-divider></el-divider>
          <span style="font-size: 13px;">作者：<span style="color: #00C2B3;">{{author}}</span></span>
          <span style="font-size: 13px;margin-left: 30px;">出版社：<span
              style="color: #00C2B3;">{{press}}</span></span>
          <span style="font-size: 13px;margin-left: 30px;">印次：<span
              style="color: #00C2B3;">{{impression}}</span></span>
          <br />
          <br />
          <span style="color: #e52222;">￥<span style="font-size: 26px;">{{price}}</span> </span>
          <br />
          <br />
          <el-button type="danger" icon="el-icon-shopping-cart-full" size="small" @click="handleShoppingCart">加入购物车
          </el-button>

        </div>
      </div>

      <el-divider content-position="center">{{bookCommentList.length == 0 ? '暂无评论':'用户评论'}}</el-divider>

      <div v-for="item in bookCommentList" :key="item.id">
        <span style="margin: 15px;font-size: 16px;font-weight: 500;">{{item.userName}}</span>
        <el-rate v-model="item.level" disabled style="display: inline-block;"></el-rate>
        <br />
        <span style="font-size: 10px;margin: 15px;">发布时间：<span>{{item.createTime}}</span></span>
        <br />
        <br />
        <span style="margin:15px;font-size: 14px;color: #414A60;">{{item.context}}</span>

        <el-divider></el-divider>
      </div>
       <el-pagination v-show="bookComentTotal > 5" layout="prev, pager, next" :total="bookComentTotal" :page-size="5"
        @current-change="handleCurrentChange"  :current-page="bookComentPage" style="text-align: center;margin: 20px 0;"></el-pagination>
    </div>
</template>
<script>
export default {
  data () {
    return {
      id: '',
      coverImg: '',
      title: '',
      syNpsis: '',
      author: '',
      press: '',
      impression: '',
      price: '',
      bookInfo: {},
      bookCommentList: [],
      bookComentTotal: 0,
      bookComentPage: 1
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    getDetail () {
      var id = this.$route.query.bookId// 接收参数渲染
      const getUrl = 'http://localhost:4096/books/search?id=' + id// 接口
      this.axios({
        method: 'get',
        url: getUrl
      }).then((res) => res.data)
        .then((data) => {
          this.id = data.data.id
        })
    }
  }
}
</script>
